<template>
	<view class="page" :style="{'height': pageHeight + 'px'}">
		<map id="map" class="map" :style="{'height': pageHeight + 'px'}"
		:latitude="latitude" :longitude="longitude" :scale="mapScale" @markertap="onMarkerClick"
		show-location></map>
		<view class="header">
			<text class="title" :style="{'margin-top': menuButtonInfo.top + 'px', 'height': menuButtonInfo.height + 'px'}">{{title}}</text>
			<view class="linear-horizontal margin-top-10 flex-space-between" style="padding: 0 12.5px;">
				<view @click="onOrgClick" class="org">
					<text>{{checkedOrg.checkedLabel}}</text>
					<image class="org-arrow" src="/static/images/icon_right.png"></image>
				</view>
				<view @click="onSearchClick" class="search linear-horizontal flex-center">
					<image class="size-16" src="/static/images/icon_search.png"></image>
				</view>
			</view>
		</view>
		<view class="button-box">
			<image @click="onRefreshClick" class="button" src="/static/images/icon_refresh.png"></image>
			<image @click="onLocationClick" class="button margin-top-5" src="/static/images/icon_my_location.png"></image>
		</view>
		<view class="menu-box">
			<view @click="onDriverClick" class="menu-item linear-vertical flex-center">
				<image class="size-20" src="/static/images/icon_driver.png"></image>
				<text style="margin-top: 4px">驾驶员</text>
			</view>
			<divider style="margin: 0 10px;"></divider>
			<view @click="onListClick" class="menu-item linear-vertical flex-center">
				<image class="size-20" src="/static/images/icon_list.png"></image>
				<text style="margin-top: 4px">列表</text>
			</view>
		</view>
		<view class="status-box">
			<view class="status">
				<view @click="onStatusClick(0, 1, null)" class="status-item" :class="statusIndex == 0 ? 'checked' : ''">
					<text class="status-value">{{onlineCount}}</text>
					<text class="status-label">在线</text>
				</view>
				<view @click="onStatusClick(1, 0, null)" class="status-item" :class="statusIndex == 1 ? 'checked' : ''">
					<text class="status-value">{{offlineCount}}</text>
					<text class="status-label">离线</text>
				</view>
				<view @click="onStatusClick(2, null, constant.TASK_STATUS_FREE)" class="status-item" :class="statusIndex == 2 ? 'checked' : ''">
					<text class="status-value">{{freeCount}}</text>
					<text class="status-label">空闲</text>
				</view>
				<view @click="onStatusClick(3, null, constant.TASK_STATUS_TASKING)" class="status-item" :class="statusIndex == 3 ? 'checked' : ''">
					<text class="status-value">{{taskCount}}</text>
					<text class="status-label">任务中</text>
				</view>
			</view>
		</view>
		<view v-if="showPop" class="pop-box">
			<view class="linear-horizontal flex-align-center">
				<image class="size-25" src="/static/images/home_vehicle.png"></image>
				<text class="numberplate">{{checkedModel.numberPlate}}</text>
				<view @click="onTrajectoryClick" class="setting linear-horizontal flex-center margin-left-10">
					<image class="size-14" src="/static/images/icon_trajectory_blue.png"></image>
					<text class="margin-left-5">轨迹</text>
				</view>
				<!-- <view class="setting linear-horizontal flex-center margin-left-5">
					<image class="size-14" src="/static/images/icon_setting_blue.png"></image>
					<text class="margin-left-5">设置</text>
				</view> -->
			</view>
			<image @click="showPop = false" class="pop-close size-16" src="/static/images/icon_close.png"></image>
			<view class="linear-horizontal flex-align-center" style="margin-top: 6px;">
				<text class="status-text" :style="'background-color:' + constant.getOnlineStatusColor(checkedModel)">{{checkedModel.isOnline > 0 ? '在线' : '离线'}}</text>
				<text class="pop-text">{{checkedModel.spd}}km/h</text>
			</view>
			<text class="pop-text margin-top-10">设备状态：{{checkedModel.remark}}</text>
			<view class="pop-text margin-top-10 linear-horizontal">
				<text>当前位置：</text>
				<text class="flex-1">{{checkedModel.location}}</text>
			</view>
		</view>
		<tree-picker ref="orgPicker" title="选择部门" :treeData="orgData" @onChecked="onOrgPickerChecked" actionText="全部" @onActionClick="onOrgReset"></tree-picker>
		<tabbar name="map"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				constant: this.constant,
				menuButtonInfo: {},
				pageHeight: 0,
				statusIndex: 0,
				latitude: 39.91,
				longitude: 116.40,
				markers: [],
				showPop: false,
				onlineCount: 0,
				offlineCount: 0,
				freeCount: 0,
				taskCount: 0,
				list: [],
				checkedModel: {},
				orgData: [],
				checkedOrg: {
					checkedId: "",
					checkedLabel: "全部"
				},
				isOnline: 1,
				taskStatus: null,
				mapScale: 16,
				lightMarker: {
					id: 99999,
					width: 44,
					height: 44,
					iconPath: '/static/images/map_transparent_marker.png',
					anchor: {x: 0.5, y: 0.5},
					joinCluster: false,
					callout: {
						content: ' ',  
						color: '#666666',
						fontSize: 14,
						bgColor: '#FFFFFF',  
						borderRadius: 5, 
						display: 'ALWAYS',
						padding: 5,
						anchorY: -5
					}
				}
			}
		},
		mounted() {
			if(!uni.getStorageSync("token")){
				uni.reLaunch({
					url: "/pages/login/login"
				})
				return
			}
			if(uni.getStorageSync("userType") == this.constant.USER_TYPE_DRIVER){
				//驾驶员无地图位置功能,强制跳转到待办任务
				uni.switchTab({
					url: "/pages/task/task"
				})
				return
			}
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			let sys = uni.getSystemInfoSync()
			let safeAreaBottomHeight = sys.screenHeight - sys.safeArea.bottom
			let headerHeight = this.menuButtonInfo.bottom + 8
			uni.setStorageSync("safeAreaBottomHeight", safeAreaBottomHeight)
			uni.setStorageSync("headerHeight", headerHeight)
			this.pageHeight = sys.screenHeight - (safeAreaBottomHeight + 50)
			setTimeout(() => {
				this.title = '时空e行'
			}, 300)
			this.initMap()
			this.loadOrg()
			this.loadData()
		},
		methods: {
			loadOrg(){
				this.api.postQuery(this.apiUrl.orgData).then(res => {
					this.orgData = res
				})
			},
			loadData(){
				this.api.postQuery(this.apiUrl.mapData, {
					companyId: this.checkedOrg.checkedId
				}).then(res => {
					this.onlineCount = res.onlineCount
					this.offlineCount = res.offlineCount
					this.freeCount = res.freeCount
					this.taskCount = res.taskCount
					this.list = res.list
					this.updateMarker()
				})
			},
			getMarkerIcon(model){
				if(this.statusIndex == 0 || this.statusIndex == 1){
					//在线状态
					return model.isOnline > 0 ? '/static/images/map_vehicle_online.png' : '/static/images/map_vehicle_offline.png'
				}else if(this.statusIndex == 2 || this.statusIndex == 3){
					//任务状态
					return model.vehicleTaskStatus == this.constant.TASK_STATUS_TASKING ? '/static/images/map_vehicle_online.png' : '/static/images/map_vehicle_free.png'
				}
				return ''
			},
			onStatusClick(index, isOnline, taskStatus){
				this.statusIndex = index
				this.isOnline = isOnline
				this.taskStatus = taskStatus
				this.updateMarker()
			},
			onSearchResult(e){
				let that = this
				let item = this.list.find(it => it.numberPlate == e.numberPlate)
				this.statusIndex = item.isOnline > 0 ? 0 : 1
				this.isOnline = item.isOnline
				this.taskStatus = null
				this.updateMarker()
				this._mapContext.includePoints({
					points: [{latitude: item.lat, longitude: item.lng}],
					padding: [20],
					success(res){
						that.checkedModel = item
						that.showPop = true
						that.updateLightMarker(item)
					}
				})
				
			},
			initMap(){
				this._mapContext = uni.createMapContext("map", this);
				this._mapContext.initMarkerCluster({
					enableDefaultStyle: false,
					zoomOnClick: true,
					gridSize: 60
				});
				this._mapContext.on("markerClusterCreate", (e) => {
					let clusterMarkers = []
					e.clusters.forEach(it => {
						const {  
							center, // 聚合点的经纬度数组  
							clusterId, // 聚合簇id  
							markerIds // 已经聚合了的标记点id数组  
						} = it
						let clusterMarker = {
							clusterId,
							...center,
							width: 40,
							height: 40,
							iconPath: '/static/images/map_transparent_marker.png',
							anchor: {x: 0.5, y: 0.5},
							label: {
								content: markerIds.length + '',  
								fontSize: 16,  
								color: '#fff',  
								width: 40,  
								height: 40,  
								bgColor: '#3C7BF8',  
								borderRadius: 99,  
								textAlign: 'center',  
								anchorX: 0,  
								anchorY: -20,  
							}
						}
						clusterMarkers.push(clusterMarker)
					})
					this._mapContext.addMarkers({  
						markers: clusterMarkers,  
						clear: false, 
					})
				});
				setTimeout(() => {
					this._mapContext.moveToLocation()
				}, 300)
			},
			updateLightMarker(model){
				this._mapContext.removeMarkers({
					markerIds: [99999],
					success(res){
						console.log(res);
					},
					fail(err){
						console.log(err);
					}
				})
				this.lightMarker.latitude = model.lat
				this.lightMarker.longitude = model.lng
				this.lightMarker.callout.content = model.numberPlate,
				this._mapContext.addMarkers({
					markers: [this.lightMarker],
					clear: false
				})
			},
			updateMarker(){
				const markers = []
				this.list.forEach((it, index) => {
					if(it.isOnline == this.isOnline || it.vehicleTaskStatus == this.taskStatus){
						markers.push({
							id: parseInt(it.equipmentId),
							latitude: it.lat,
							longitude: it.lng,
							iconPath: this.getMarkerIcon(it),
							width: 25,
							height: 44,
							rotate: it.dre,
							anchor: {x: 0.5, y: 0.5},
							joinCluster: true
						})
					}
				})
				this._mapContext.addMarkers({
					markers,
					clear: true
				})
			},
			onMarkerClick(e){
				this.showPop = true
				this.checkedModel = this.list.find(it => it.equipmentId == e.markerId)
				this.updateLightMarker(this.checkedModel)
			},
			onOrgClick(){
				this.$refs.orgPicker.show();
			},
			onSearchClick(){
				uni.navigateTo({
					url: "/pages/index/search?companyId=" + this.checkedOrg.checkedId
				})
			},
			onRefreshClick(){
				this.loadData()
			},
			onLocationClick(){
				this._mapContext.moveToLocation()
			},
			onOrgPickerChecked(e){
				this.checkedOrg = {
					checkedId: e.checkedIds[0],
					checkedLabel: e.checkedLabels[0]
				}
				this.loadData()
			},
			onOrgReset(){
				this.$refs.orgPicker.dismiss();
				this.checkedOrg = {
					checkedId: "",
					checkedLabel: "全部"
				}
				this.loadData()
			},
			onDriverClick(){
				uni.navigateTo({
					url: "/pages/task/driverList?companyId=" + this.checkedOrg.checkedId
				})
			},
			onListClick(){
				uni.navigateTo({
					url: "/pages/task/vehicleList?companyId=" + this.checkedOrg.checkedId
				})
			},
			onTrajectoryClick(){
				uni.navigateTo({
					url: '/pages/trajectory/query?dvo=' + this.checkedModel.deviceNo + '&numberPlate=' + this.checkedModel.numberPlate
				})
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		position: relative;
		box-sizing: border-box;
	}
	
	.map{
		position: absolute;
		width: 750rpx;
	}
	
	.header{
		position: absolute;
		width: 100vw;
		height: 138.5px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0));
	}
	
	.title{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 38rpx;
		color: #18191A;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.org{
		background-color: white;
		padding: 10px 16px;
		border-radius: 99px;
		box-shadow: 0px 20px 40px 0px rgba(8,27,74,0.1);
		border-radius: 40px;
		border: 1px solid #DAE0E6;
		font-size: 14px;
		color: #18191A;
	}
	
	.org-arrow{
		width: 9px;
		height: 9px;
		margin-left: 6px;
	}
	
	.search{
		width: 40px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 20px 40px 0px rgba(8,27,74,0.1);
		border-radius: 50%;
		border: 1px solid #DAE0E6;
	}
	
	.button-box{
		position: absolute;
		bottom: 90px;
		left: 10px;
		display: flex;
		flex-direction: column;
	}
	
	.button{
		width: 40px;
		height: 40px;
		background: #FFFFFF;
		box-shadow: 0px 20px 40px 0px rgba(8,27,74,0.1);
		border-radius: 50%;
		border: 1px solid #DAE0E6;
		padding: 10px;
		box-sizing: border-box;
	}
	
	.menu-box{
		width: 46px;
		position: absolute;
		top: 140px;
		right: 10px;
		display: flex;
		flex-direction: column;
		background: #FFFFFF;
		box-shadow: 0px 20px 40px 0px rgba(8,27,74,0.1);
		border-radius: 16px;
		border: 1px solid #DAE0E6;
		box-sizing: border-box;
	}
	
	.menu-item{
		color: #18191A;
		font-size: 12px;
		box-sizing: border-box;
		padding: 12px 0;
	}
	
	.status-box{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		box-sizing: border-box;
		padding: 20rpx;
	}
	
	.status{
		width: 100%;
		background-color: white;
		height: 140rpx;
		border-radius: 20rpx;
		padding: 5px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
	}
	
	.status-item{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	
	.status-value{
		font-size: 16px;
		font-weight: bold;
		color: #317EF1;
	}
	
	.status-label{
		font-size: 14px;
		color: #616366;
	}
	
	.checked{
		background-color: #317EF1;
		border-radius: 8px;
	}
	
	.checked .status-value,
	.checked .status-label {
	    color: #FFFFFF; /* 设置颜色为白色 */
	}
	
	.pop-box{
		position: absolute;
		width: 710rpx;
		left: 20rpx;
		right: 20rpx;
		bottom: 10px; 
		background-color: white;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 20px 15px;
	}
	
	.numberplate{
		color: #18191A;
		font-size: 20px;
		font-weight: bold;
		margin-left: 6px;
	}
	
	.setting{
		background-color: #F2F2F2;
		width: 75px;
		height: 36px;
		border-radius: 7px;
		font-size: 14px;
		color: #327EEF;
	}
	
	.pop-close{
		position: absolute;
		top: 12px;
		right: 12px;
	}
	
	.status-text{
		padding: 4px 6px;
		font-size: 12px;
		color: white;
		border-radius: 99px;
		margin-right: 10px;
	}
	
	.pop-text{
		color: #5C6166;
		font-size: 13px;
	}

</style>
